<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
  <th:block th:fragment="navbar">
    <header class="joe_header">
      <div
        class="joe_header__above"
        th:classappend="|${theme.config.theme.enable_show_in_up ? 'topInDown' : ''} ${theme.config.navbar.enable_fixed_header ? 'fixed' : ''} ${theme.config.navbar.enable_fixed_header and theme.config.navbar.enable_glass_blur ? 'glass' : ''}|"
      >
        <div
          class="joe_container joe_header_container"
          th:style="'max-width:'+${theme.config.navbar.navbar_max_width} ?: ''"
        >
          <th>
            <i class="joe-font joe-icon-caidan joe_header__above-slideicon"></i>
            <th
              th:if="${theme.config.navbar.show_logo}"
              th:with="logoLink = ${theme.config.navbar.logo_link == '#' ? 'javascript:;' : theme.config.navbar.logo_link}"
            >
              <a
                class="joe_header__above-logo"
                th:title="${site.title}"
                th:href="${logoLink ?: site.url}"
                th:target="${theme.config.navbar.logo_link == '#' or theme.config.navbar.logo_link == '' ? '' : '_blank'}"
                rel="noopener noreferrer"
              >
                <img
                  th:src="${site.logo}"
                  th:alt="${site.title}"
                  th:style="'border-radius:'+${theme.config.navbar.logo_radius} ?: '4px'"
                />
              </a>
            </th>
          </th>
          <nav
            class="joe_header__above-nav"
            th:classappend="|${theme.config.navbar.enable_active_shadow ? 'active-shadow':''} ${theme.config.navbar.enable_icon_animate ? 'active-animate':''}|"
          >
            <th:block th:if="${#lists.isEmpty(theme.config.navbar.menu)}">
              <th:block th:with="menu = ${menuFinder.getPrimary()}">
                <th:block th:with="menuItems = ${menu.menuItems}">
                  <th:block th:each="menuItem : ${menuItems}">
                    <th:block th:if="${#lists.isEmpty(menuItem.children)}">
                      <th:block th:replace="~{modules/macro/menu-item :: menu-item(${menuItem})}" />
                    </th:block>
                    <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
                      <div class="joe_dropdown" trigger="hover" placement="60px">
                        <div class="joe_dropdown__link">
                          <th:block th:replace="~{modules/macro/menu-item :: menu-item(${menuItem})}" />
                          <i class="joe-font joe-icon-arrow-down joe_dropdown__link-icon" style="color:var(--main)"></i>
                        </div>
                        <nav class="joe_dropdown__menu" style="top: 60px;">
                          <th:block th:each="childMenu : ${menuItem.children}">
                            <li>
                              <th:block th:replace="~{modules/macro/menu-item :: menu-item(${childMenu})}" />
                            </li>
                          </th:block>
                        </nav>
                      </div>
                    </th:block>
                  </th:block>
                </th:block>
              </th:block>
            </th:block>
            <!--自选导航-->
            <th:block th:if="${not #lists.isEmpty(theme.config.navbar.menu)}">
              <th:block th:with="menu = ${menuFinder.getByName(theme.config.navbar.menu)}">
                <th:block th:with="menuItems = ${menu.menuItems}">
                  <th:block th:each="menuItem : ${menuItems}">
                    <th:block th:if="${#lists.isEmpty(menuItem.children)}">
                      <th:block th:replace="~{modules/macro/menu-item :: menu-item(${menuItem})}" />
                    </th:block>
                    <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
                      <div class="joe_dropdown" trigger="hover" placement="60px">
                        <div class="joe_dropdown__link">
                          <th:block th:replace="~{modules/macro/menu-item :: menu-item(${menuItem})}" />
                          <i class="joe-font joe-icon-arrow-down joe_dropdown__link-icon" style="color:var(--main)"></i>
                        </div>
                        <nav class="joe_dropdown__menu" style="top: 60px;">
                          <li th:each="childMenu : ${menuItem.children}">
                            <th:block th:replace="~{modules/macro/menu-item :: menu-item(${childMenu})}" />
                          </li>
                        </nav>
                      </div>
                    </th:block>
                  </th:block>
                </th:block>
              </th:block>
            </th:block>
          </nav>
          <div class="joe_header__above-search">
            <button
              id="halo-search"
              class="submit"
              type="submit"
              aria-label="搜索按钮"
              style="border-radius: 17px 17px 17px 17px"
            >
              <i class="joe-font joe-icon-search"></i>
          </button>
          </div>
          <a href="javascript:SearchWidget.open()" title="搜索">
            <i class="joe-font joe-icon-search joe_header__above-searchicon"></i>
          </a>
        </div>
      </div>

      <!-- 移动端侧边栏 -->
      <div class="joe_header__slideout">
        <div class="joe_header__slideout-wrap">
          <img
            class="joe_header__slideout-image"
            width="100%"
            height="150" 
            th:src="${theme.config.blogger.author_bg ?: #theme.assets('/img/author_bg.jpg')}"
            alt="侧边栏壁纸"
          />
          <div class="joe_header__slideout-author">
            <div class="user-profile">
              <img
                class="avatar ls-is-cached lazyloaded"
                width="50"
                height="50"
                th:data-src="${theme.config.blogger.lazyload_avatar}"
                th:src="${theme.config.blogger.avatar ?: theme.config.blogger.default_avatar}"
                alt="博主头像"
              />
              <div class="info">
                <a
                  class="link"
                  th:href="${site.url}"
                  target="_blank"
                  rel="noopener noreferrer nofollow"
                >
                  [[${theme.config.blogger.nickname ?: site.title}]]
                </a>
                <p class="motto joe_motto">[[${theme.config.blogger.motto}]]</p>
              </div>
            </div>
            <th:block th:if="${theme.config.blogger.enable_mobile_social} and ${not #lists.isEmpty(theme.config.blogger.socials)}">
              <div class="social-account">
                <th:block th:each="socials : ${theme.config.blogger.socials}">
                  <th:block th:replace="~{modules/macro/social :: ${socials.socials_select}}" />
                </th:block>
              </div>
            </th:block>
          </div>
          <ul class="joe_header__slideout-count" th:with="stats = ${siteStatsFinder.getStats()}">
            <li class="item">
              <i class="joe-font joe-icon-edit"></i>
              <span>累计撰写 <strong>[[${stats.post}]]</strong> 篇文章</span>
            </li>
            <th:block th:with="tags = ${tagFinder.listAll()}">
              <li class="item" th:with="tagNum = ${#lists.size(tags)}">
                <i class="joe-font joe-icon-remen"></i>
                <span>累计创建 <strong>[[${tagNum}]]</strong> 个标签</span>
              </li>
            </th:block>
            <li class="item">
              <i class="joe-font joe-icon-message"></i>
              <span>累计收到 <strong>[[${stats.comment}]]</strong> 条评论</span>
            </li>
          </ul>
          <ul class="joe_header__slideout-menu panel-box">
            <li>
              <a class="link panel in" href="#" rel="nofollow">
                <span>栏目</span>
                <i class="joe-font joe-icon-arrow-right"></i>
              </a>
              <ul class="slides panel-body panel-box panel-side-menu" style="display: block;">
                <th:block th:if="${#lists.isEmpty(theme.config.navbar.menu)}">
                  <th:block th:with="menu = ${menuFinder.getPrimary()}">
                    <th:block th:with="menuItems = ${menu.menuItems}">
                      <th:block th:each="menuItem : ${menuItems}">
                        <th:block th:if="${#lists.isEmpty(menuItem.children)}">
                          <li>
                            <a
                              class="link"
                              th:title="${menuItem.status.displayName}"
                              th:href="@{${menuItem.status.href}}"
                              th:target="${menuItem.spec.target?.value}"
                            >
                              [[${menuItem.status.displayName}]]
                          </a>
                          </li>
                        </th:block>
                        <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
                          <li>
                            <div class="link panel">
                              <a
                                th:title="${menuItem.status.displayName}"
                                th:href="@{${menuItem.status.href}}"
                                th:target="${menuItem.spec.target?.value}"
                              >
                                [[${menuItem.status.displayName}]]
                              </a>
                              <i class="joe-font joe-icon-arrow-right"></i>
                            </div>
                            <ul class="slides panel-body">
                              <th:block th:each="childMenu : ${menuItem.children}">
                                <li>
                                  <a
                                    class="link"
                                    th:title="${childMenu.status.displayName}"
                                    th:href="@{${childMenu.status.href}}"
                                    th:target="${childMenu.spec.target?.value}"
                                  >
                                    [[${childMenu.status.displayName}]]
                                  </a>
                                </li>
                              </th:block>
                            </ul>
                          </li>
                        </th:block>
                      </th:block>
                    </th:block>
                  </th:block>
                </th:block>
                <th:block th:if="${not #lists.isEmpty(theme.config.navbar.menu)}">
                  <th:block th:with="menu = ${menuFinder.getByName(theme.config.navbar.menu)}">
                    <th:block th:with="menuItems = ${menu.menuItems}">
                      <th:block th:each="menuItem : ${menuItems}">
                        <th:block th:if="${#lists.isEmpty(menuItem.children)}">
                          <li>
                            <a
                              class="link"
                              th:title="${menuItem.status.displayName}"
                              th:href="@{${menuItem.status.href}}"
                              th:target="${menuItem.spec.target?.value}"
                            >
                              [[${menuItem.status.displayName}]]
                            </a>
                          </li>
                        </th:block>
                        <th:block th:if="${not #lists.isEmpty(menuItem.children)}">
                          <li>
                            <div class="link panel">
                              <a
                                th:title="${menuItem.status.displayName}"
                                th:href="@{${menuItem.status.href}}"
                                th:target="${menuItem.spec.target?.value}"
                              >
                                [[${menuItem.status.displayName}]]
                              </a>
                              <i class="joe-font joe-icon-arrow-right"></i>
                            </div>
                            <ul class="slides panel-body">
                              <th:block th:each="childMenu : ${menuItem.children}">
                                <li>
                                  <a
                                    class="link"
                                    th:title="${childMenu.status.displayName}"
                                    th:href="@{${childMenu.status.href}}"
                                    th:target="${childMenu.spec.target?.value}"
                                  >
                                    [[${childMenu.status.displayName}]]
                                  </a>
                                </li>
                              </th:block>
                            </ul>
                          </li>
                        </th:block>
                      </th:block>
                    </th:block>
                  </th:block>
                </th:block>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="joe_header__searchout">
        <a href="javascript:SearchWidget.open()" title="搜索"></a>
      </div>
      <div class="joe_header__mask"></div>
    </header>
  </th:block>
</html>
